<template>
    <div>
        <van-nav-bar title="商品详情" left-arrow @click-left="$router.back()">
            <template #right>
                <van-icon name="ellipsis" />
            </template>
        </van-nav-bar>
        <!-- 商品详情 -->
        <div class="product-info">
            <img style="width: 100%" :src="info.goodsCoverImg" alt="" />
            <div class="info-goodsName">
                {{ info.goodsName }}
            </div>
            <p class="info-p">免邮费 顺丰快递</p>
            <!-- <p>{{ info.goodsIntro }}</p> -->
            <p class="info-price">￥{{ info.sellingPrice }}</p>
            <ul class="info-ul">
                <li>概述</li>
                <li>参数</li>
                <li>安装服务</li>
                <li class="info-ul-li">常见问题</li>
            </ul>
            <div v-html="info.goodsDetailContent" class="info-content"></div>
        </div>
        <!-- 加入购物车 -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" dot />
            <van-goods-action-icon icon="cart-o" text="购物车" :badge="$store.getters.cartNum"
                @click="$router.push('/cart')" />
            <van-goods-action-button type="warning" text="加入购物车" @click="add" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
import { getInfoData, addCart } from "../../api/index.js"
import { Toast } from "vant";
export default {
    name: "Info",
    data() {
        return {
            info: {},// 商品详情
            flag: true, // 标识是否已经加入购物车
        };
    },
    created() {
        this.getData();
        this.$store.dispatch("changeCartListAsync"); //进来就获取购物车的数据
    },
    methods: {
        getData() {
            getInfoData(this.$route?.params?.productId).then(data => {
                console.log("data:", data);
                this.info = data.data
            })
        },
        // 点击加入购物车
        add() {
            if (!this.flag) return;
            this.flag = false;
            addCart({ goodsId: this.$route?.params?.productId, goodsCount: 1 }).then(data => {
                this.flag = true;
                if (data.resultCode == 200) {
                    Toast.success("添加成功")
                    this.$store.dispatch("changeCartListAsync")
                } else {
                    Toast.fail("商品已存在")
                }
            })
        }
    },

};
</script>

<style  lang="less" scoped>
.van-nav-bar {
    position: fixed;
    width: 100%;
    height: 1.17333rem;
    top: 0;
    left: 0;
    z-index: 100;
    line-height: 1.17333rem;
    padding: 0 0.26667rem;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 0.02667rem solid #dcdcdc;

}

.product-info {
    margin-top: 1.17333rem;
    padding: 0 0.26667rem;

    .info-goodsName {
        font-size: 0.48rem;
        text-align: left;
        color: #333;
    }

    .info-p {
        font-size: 0.37333rem;
        text-align: left;
        color: #999;
        padding: 0.13333rem 0;
    }

    .info-price {
        color: #f63515;
        font-size: 0.58667rem;
        text-align: left;
    }

    .info-ul {
        width: 100%;
        height: 30px;
        margin: 26px 0;
        display: flex;
        justify-content: space-between;

        li {
            flex: 1;
            padding: 0.13333rem 0;
            text-align: center;
            font-size: 0.4rem;
            border-right: 0.02667rem solid #999;
            box-sizing: border-box;
        }
    }

    .info-ul .info-ul-li {
        border-right: none;
    }

    .info-content {
        padding: 0 0.53333rem;
    }
}

.van-goods-action {
    .van-info {
        position: absolute;
        top: -17px;
        right: 13px;
    }
}
</style>